/**
 * @description 统计页面的组件列表
 * @author 大肘子
 */

import React, { FC, MouseEvent } from "react";
//获取组件列表
import useGetComponentInfo_redux from "../../../hooks/useGetComponentInfo_redux";
//获取组件的数据
import { compoentInfoType } from "../../../store/componentReducer";
//根据组件的type获取组件
import { getComponentConfigByType } from "../../../questionComponents";
//引入样式组件
import style from "./index.module.scss";
import classNames from "classnames/bind";
import { it } from "node:test";
const CBN = classNames.bind(style);

type propsType = {
  selectedId: string;
  setselectedId: (id: string) => void;
  selectedType: string;
  setselectedType: (id: string) => void;
  selectedProps: any;
};

//通过type获取组件信息的方法
function getComponentBytype(component: compoentInfoType, selectedProps: any) {
  const { type, props, fe_id } = component;
  const newprops: any = {};
  const componentConfig = getComponentConfigByType(type);

  if (type == "questionRadio") {
    newprops.defaultselected = selectedProps[fe_id];
  }
  if (props.title == "你的名字") {
    newprops.placeholder = selectedProps[fe_id];
  }
  if (props.title == "你的电话") {
    newprops.placeholder = selectedProps[fe_id];
  }
  if (type == "questionTextarea") {
    newprops.placeholder = selectedProps[fe_id];
  }
  if (type == "questionCheckbox") {
    if (!selectedProps) return;
    newprops.list = [];
    if (!props.list) return;
    for (let i = 0; i < props.list?.length; i++) {
      const item = { ...props.list[i] };
      const str = selectedProps[fe_id] as string;
      if (str.includes(item.text)) {
        item.checked = true;
      }
      newprops.list.push(item);
    }
  }

  if (componentConfig == null) return null;
  const { Component } = componentConfig;
  const totalprops = { ...props, ...newprops };
  return <Component {...totalprops}></Component>;
}

const ComponentList: FC<propsType> = (props) => {
  const { componentList } = useGetComponentInfo_redux();
  const { selectedId, setselectedId, selectedType, setselectedType, selectedProps = null } = props;
  function handleClick(evevt: MouseEvent, id: string, type: string) {
    //阻止冒泡行为
    evevt.stopPropagation();
    setselectedId(id);
    setselectedType(type);
  }
  return (
    <div className={CBN("listwrapper")}>
      {componentList
        .filter((c: compoentInfoType) => {
          return !c.ishidden;
        })
        .map((c: compoentInfoType) => {
          const { fe_id, islock, type, props } = c;
          //拼接classname
          //拼接Classnames
          const canvasWrapDefaultName = CBN("componentwrap");
          const selectCanvasName = CBN("selected");
          //组件是否锁定
          const lockedCanvasName = CBN("locked");
          const canvasWrapClassname = CBN({
            [canvasWrapDefaultName]: true,
            [selectCanvasName]: selectedId === fe_id,
            [lockedCanvasName]: islock,
          });
          return (
            <div
              className={canvasWrapClassname}
              key={fe_id}
              onClick={(e) => {
                handleClick(e, fe_id, type);
              }}
            >
              <div className={CBN("component")}>{getComponentBytype(c, selectedProps)}</div>
            </div>
          );
        })}
    </div>
  );
};

export default ComponentList;
